<template>
  <div id="app">
    <Navbar />
    <main>
      <section class="famous-teachers">
        <h1>名师</h1>
        <div v-for="(teacher, index) in teacherList" :key="index" class="teacher-item">
          <img :src="teacher.avatar" alt="名师头像" class="teacher-avatar">
          <h2 class="teacher-name">{{ teacher.name }}</h2>
          <p class="teacher-intro">{{ teacher.introduction }}</p>
        </div>
      </section>
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Navbar from "@/components/Navbar/Navbar.vue";
import Footer from "@/components/Footer/Footer.vue";

// 模拟名师数据
const teacherList = [
  {
    name: "张老师",
    introduction: "张老师拥有多年的计算机教学经验，擅长软件开发课程，曾带领学生在多项编程竞赛中获奖，教学风格生动有趣，深受学生喜爱。",
    avatar: "https://example.com/teacher1.jpg" // 这里应替换为实际的图片链接或使用相对路径指向本地图片
  },
  {
    name: "李老师",
    introduction: "李老师专注于大数据领域的研究与教学，在数据分析、数据挖掘等方面有深厚的造诣，发表过多篇学术论文，为企业培养了大量优秀的数据人才。",
    avatar: "https://example.com/teacher2.jpg"
  },
  {
    name: "王老师",
    introduction: "王老师是网络工程方面的专家，参与过多个大型网络项目的设计与实施，在网络安全、网络优化等方面有着丰富的实践经验，教学注重理论与实践相结合。",
    avatar: "https://example.com/teacher3.jpg"
  }
];
</script>

<style scoped>
/* 整体页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.famous-teachers {
  padding: 40px;
}

.teacher-item {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: start;
}

.teacher-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.teacher-name {
  margin-bottom: 10px;
  color: #333;
}

.teacher-intro {
  line-height: 1.6;
  color: #666;
}
</style>